<template>
  <div>
      <div ref="charts" style="width: 1000px; height: 800px"></div>
  </div>
</template>
<script>
import beijing from "@/assets/beijin.json"
import * as echarts from "echarts";
export default {
data(){
  return{
    data: [
            { name: "房山区", value: 11 },
            { name: "顺义区", value: 447 },
            { name: "朝阳区", value: 1397},
            { name: "通州区", value: 4471 },
            { name: "西城区", value: 2540 },
            { name: "丰台区", value: 245 },
            { name: "东城区", value: 14},
            { name: "昌平区", value: 6 },
            { name: "大兴区", value: 203 },
            { name: "海淀区", value: 153 },
            { name: "平谷区", value: 74},
            { name: "石景山区", value:70 },
            { name: "门头沟区", value:51 },
            { name: "怀柔区", value: 30},
            { name: "密云区", value: 15 },
            { name: "延庆区", value: 14 },
          ]
  }
},
created () {
  this.$nextTick(() => {
    this.initCharts();
  })
},
methods: {
  // let data = [
  //       { name: "朝阳区", value: 13097 },
  //       { name: "顺义区", value: 4707 },
  //       { name: "通州区", value: 4077 },
  //       { name: "西城区", value: 3045 },
  //       { name: "丰台区", value: 4035 },
  //       { name: "东城区", value: 5046 },
  //       { name: "昌平区", value: 1023 },
  //       { name: "大兴区", value: 304 },
  //       { name: "海淀区", value: 2304 },
  //       { name: "平谷区", value: 4302 },
  //     ]
  initCharts() {
    const charts = echarts.init(this.$refs["charts"]);
    const option = {
         visualMap:{
            type:'piecewise',
            pieces:[{
              min:0,
              max:100,
              color:'green'
            },{
              min:101,
              max:999,
              color:'orange'
            },{
              min:1000,
              max:2000,
              color:'red'
            }]
          },
      // 背景颜色
      backgroundColor: "#404a59",
      // 提示浮窗样式
      tooltip: {
        show: true,
        trigger: "item",
        alwaysShowContent: false,
        backgroundColor: "#0C121C",
        borderColor: "rgba(0, 0, 0, 0.16);",
        hideDelay: 100,
        triggerOn: "mousemove",
        enterable: true,
        textStyle: {
          color: "#DADADA",
          fontSize: "12",
          width: 20,
          height: 30,
          overflow: "break",
        },
        showDelay: 100
      },
      // 地图配置
      series:[
        {
          type:"map",
          map: "北京",
          data:this.data,
        label: {
          // 通常状态下的样式
          normal: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          // 鼠标放上去的样式
          emphasis: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        // 地图区域的样式设置
        itemStyle: {
          normal: {
            borderColor: "rgba(147, 235, 248, 1)",
            borderWidth: 1,
            shadowColor: "rgba(128, 217, 248, 1)",
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 10,
          },
          // 鼠标放上去高亮的样式
          emphasis: {
            areaColor: "#389BB7",
            borderWidth: 0,
          },
        },
        }
      ]
    };
    // 地图注册，第一个参数的名字必须和option.geo.map一致
    echarts.registerMap("北京",beijing)

    charts.setOption(option);
  },
},
};
</script>